<template>
	<view>
		<view class="row ranting middle-xs">
			<view class="col-xs btn btn-primary btn-sm" :class="{ 'btn-danger' : types === 1 }" @click="sort_list(1)">积分排行</view>
			<view class="col-xs btn btn-primary btn-sm" :class="{ 'btn-danger' : types === 2 }" @click="sort_list(2)">报送数量</view>
			<view class="col-xs btn btn-primary btn-sm" :class="{ 'btn-danger' : types === 3 }" @click="sort_list(3)">录用排行</view>
		</view>
		<view v-if="companys">
			<view class="row list middle-xs">
				<view class="col-xs-6">单位名称</view>
				<view class="col-xs-2">录用</view>
				<view class="col-xs-2">未录用</view>
				<view class="col-xs-2">积分</view>
			</view>
			<view class="row list middle-xs" v-for="(item, index) in companys" :key="index">
				<view class="col-xs-6">{{ item.name }}</view>
				<view class="col-xs-2">{{ item.hired_count }}</view>
				<view class="col-xs-2">{{ item.not_hired_count }}</view>
				<view class="col-xs-2">{{ item.hired_integral }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from 'server/getData'
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				title: 'title',
				page: 0,
				companys: [],
				types: 1,
				loadMoreText: "加载中...",
				showLoadMore: false
			}
		},
		onPullDownRefresh () {
			this.initData()
		},
		onLoad() {
			this.is_validate_login()
			if (!this.user) {
				return false
			}
			this.initData()
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			async initData() {
				let res = await API.articles.fetchCompanys()
				if (res.success === true) {
					this.companys = res.data.items
				}
				uni.stopPullDownRefresh()
			},
			sort_list (types) {
				this.types = types
				if (types === 1) {
					this.companys.sort((a, b) => a.hired_integral - b.hired_integral)
				}
				if (types === 2) {
					this.companys.sort((a, b) => {
						(b.not_hired_count + b.hired_count) - (a.not_hired_count + a.hired_count)
					})
				}
				if (types === 3) {
					this.companys.sort((a, b) => b.hired_count - a.hired_count)

				}
			},
			is_validate_login() {
				if (!this.user) {
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能继续',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../users/login'
								})
							}
						}
					})
				}
			},
		}
	}
</script>

<style>
@import '../../common/flexboxgrid.min.css';
.row {margin: 0upx;}
.col-xs{margin: 0upx; padding: 0upx;}
page {
	height: auto;
	min-height: 100%;
}
.ranting {
	text-align: center;
	height: 50px;
	line-height: 50px;
	background:#f7f7f7;
}
.list {
	height: 45px;
	line-height: 45px;
	background: #ffffff;
	border-bottom: 1px solid #e2e2e2;
}
.btn {
	margin: 0px 10px;
	display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.btn, .btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
</style>
